<template>
  <div class="contract">
    <div class="contract-tabs">
      <span class="active">工程合同大小分布</span>
    </div>
    <div class="contract-content">
      <div class="unit">单位：个</div>
      <div id="echarts-contract" />
      <div class="unit2">单位: (亿元)</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Global from '../../utils/Global.js'
import echarts from 'echarts'
const uplodadUrl = Global.uplodadUrl
export default {
  data() {
    return {
      echartsData: [],
      xAxisData: []
    }
  },
  mounted() {
    this.GetStatisticalDataGroupByProjectScale()
  },
  methods: {
    GetStatisticalDataGroupByProjectScale() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectScale`
      }).then((res) => {
        // console.log(res, '合同大小分布')
        _this.echartsData = [] // 清空
        _this.xAxisData = [] // 清空
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.类型
          obj.value = item.数量
          _this.echartsData.push(obj)
          _this.xAxisData.push(item.类型)
        })
        // console.log(_this.echartsData, '处理后工程分布图数据')
        this.drawEcharts()
      })
    },
    drawEcharts() {
      const _this = this
      // 基于准备好的dom，初始化echarts实例
      const myChart4 = echarts.init(document.getElementById('echarts-contract'))
      // 绘制图表
      myChart4.setOption({
        color: ['#5AAEF3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}亿元：{c}个'
        },
        grid: {
          left: '3%',
          right: '1%',
          top: '3%',
          containLabel: true
        },
        xAxis: [{
          name: '亿元',
          type: 'category',
          show: true,
          data: _this.xAxisData,
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'bar',
          barWidth: '40%',
          data: _this.echartsData
        }]
      })
    }
  }

}

</script>
<style lang="scss" scoped>
  .contract {
    width: 100%;
    height: 386px;
    margin-top: 5px;
    background: #FFFFFF;

    .contract-tabs {
      border-bottom: 1px solid #1468B7;
      padding-top: 7px;
      padding: 10px;

      span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
        cursor: pointer;

      }

      .active {
        color: #333;
        font-weight: 600;
      }
    }

    .contract-content {
      position: relative;

      .unit {
        width: 56px;
        height: 20px;
        font-size: 14px;
        margin-left: 13px;
        margin-top: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3E3E3E;
        line-height: 20px;
      }

      .unit2 {
        position: absolute;
        z-index: 999999;
        bottom: 43px;
        right: 4px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3E3E3E;
        line-height: 20px;
      }

      #echarts-contract {
        margin: 5px auto;
        width: 360px;
        height: 320px;
        overflow: hidden;
      }
    }
  }

</style>
